import { Button, Image, Text, View } from '@tarojs/components';
import Taro, { ShareAppMessageReturn, useShareAppMessage } from '@tarojs/taro';
import { useEffect, useState } from 'react';
import { AtGrid } from 'taro-ui';
import data from '../util/data';
import './user.less';
import { connect } from 'react-redux';
import { addScore } from '../../services/api-user';

const logoImg = require('../assert/Img_logo.png')
const contact = require('../assert/Person_Icon_Contact.png')
const group = require('../assert/Person_Icon_Group.png')


const MyPage = (props) => {
    const { dispatch, scoreInfo } = props

    const [erweima, setErweima] = useState('');
    const [userInfo, setUserInfo] = useState({ followCount: 0, fansCount: 0 });

    useShareAppMessage(() => {
        return {
            title: '免费AI聊天和绘画,用它就够了',
            path: '/pages/community/index',
            imageUrl: data.shareImgUrl
        } as ShareAppMessageReturn
    })

    useEffect(() => {
        setErweima(data.erweima)

    }, [erweima])

    useEffect(() => {

    }, [scoreInfo])

    useEffect(() => {
        Taro.setNavigationBarColor({ backgroundColor: '#2c2c31', frontColor: '#ffffff' })
        // 加载用户信息
        // dispatch({
        //     type: 'users/fetchUserInfo',
        //     cb: (res) => {
        //         console.log('处理dva请求结果======', res)
        //     }
        // })


        // 加载积分信息
        dispatch({
            type: 'fetchScoreInfo',
            cb: res => {
                console.log('积分信息回调:', res)
            }
        })
    }, [])

    const btnShare = (_: any) => {
        addScore({}).then(res => {
            console.log('增加积分结果:', res)
            if (res.statusCode === 200) {
                if (res.data.code === 'SUCCESS') {
                    dispatch({ type: 'users/fetchScoreInfo' })
                }
            }
        })
    }

    return (
        <View className='wrapper'>
            <View className='userInfo'>
                <Image className='avatar' src={logoImg}></Image>
                {/* <Text key='text' style={{ fontSize: '18px', marginLeft: '10px', color: 'white' }}>幻景画师</Text> */}
                <View style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
                    <View style={{ display: 'flex', alignItems: 'center' }}>
                        <Text style={{ fontSize: 16, color: 'white' }}>幻景画师</Text>
                        <Text style={{ fontSize: 9, color: 'white', marginLeft: 5, backgroundColor: 'grey', borderRadius: 4, padding: '0 3px' }}>VIP</Text>
                    </View>
                    <View style={{ fontSize: '12px', color: '#a0a0a0', marginTop: 5 }}>
                        关注 <Text style={{ color: 'white', marginRight: 20 }}>{userInfo.followCount}</Text>
                        粉丝 <Text style={{ color: 'white' }}>{userInfo.fansCount}</Text>
                    </View>

                </View>
                {/* <Image className='navigate' src={userDetail} mode='aspectFit'></Image> */}
            </View>
            <AtGrid mode='square' columnNum={3} hasBorder={false}
                data={
                    [
                        {
                            image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                            value: '作品中心'
                        },
                        {
                            image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                            value: '赞和收藏'
                        },
                        {
                            image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
                            value: '我的积分'
                        }
                    ]
                } />
            <View className='contact'>
                <Image className='contact-head' src={contact} mode='aspectFit'></Image>
                <Text className='link' key='text'>邀请好友</Text>
                <Button size='mini' openType='share' plain={true} style={{ display: 'flex', flex: 'auto', justifyContent: 'flex-end' }} onClick={btnShare}>
                    <View className='at-icon at-icon-share-2' style={{ color: 'white', fontSize: 22 }}></View>
                </Button>
            </View>
            <View className='group'>
                <Image className='group-head' src={group} mode='aspectFit'></Image>
                <Text className='link' key='text'>加入群聊</Text>
            </View>
            {/* <View className='container-erweima'>
                <Image className='erweima' src={erweima} mode='aspectFit'></Image>
            </View> */}
            <View className='im-toolbar'>
            </View>
        </View>
    )

    // useEffect(() => {
    //     Taro.getUserProfile({
    //         desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    //         success: (res) => {
    //             // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    //             console.log('获取用户信息', res)
    //             // this.setState({
    //             //     userInfo: res.userInfo,
    //             //     hasUserInfo: true
    //             // })
    //         }
    //     })

    //     Taro.getSetting({
    //         success: (res) => {
    //             // 检查用户是否已授权
    //             if (res.authSetting['scope.userInfo']) {
    //                 // 用户已授权，可以获取用户信息
    //                 Taro.getUserInfo({
    //                     success: (res) => {
    //                         const { userInfo } = res;
    //                         const { avatarUrl, nickName } = userInfo;
    //                         // TODO: 处理用户信息
    //                     },
    //                     fail: (err) => {
    //                         console.log('获取用户信息失败', err);
    //                     }
    //                 });
    //             } else {
    //                 // 用户未授权，弹出授权框
    //                 Taro.authorize({
    //                     scope: 'scope.userInfo',
    //                     success: () => {
    //                         // 用户授权成功，可以获取用户信息
    //                         Taro.getUserInfo({
    //                             success: (res) => {
    //                                 const { userInfo } = res;
    //                                 const { avatarUrl, nickName } = userInfo;
    //                                 // TODO: 处理用户信息
    //                             },
    //                             fail: (err) => {
    //                                 console.log('获取用户信息失败', err);
    //                             }
    //                         });
    //                     },
    //                     fail: (err) => {
    //                         console.log('用户拒绝授权', err);
    //                     }
    //                 });
    //             }
    //         }
    //     });
    // })
}

// export default MyPage

export default connect(({ users }) => ({
    scoreInfo: users.scoreInfo,
}))(MyPage)

